<template>
  <ul class="tag-list-wrapper clearfix">
    <li v-for="(tag, idx) in tags" :key="idx">
      {{ tag }}
      <i class="iconfont icon-cancel" @click="delTag(idx)"></i>
    </li>
    <li>
      <input type="text" ref="tagInput" maxlength="10">
      <button class="submit-button" @click="addTag">+</button>
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      tags: {
        type: Array,
        default: () => []
      },
    },
    methods: {
      addTag() {
        if(this.$refs.tagInput.value === '') return;
        this.$emit('addTag', this.$refs.tagInput.value);
        this.$refs.tagInput.value = '';
      },
      delTag(idx) {
        this.$emit('delTag', idx);
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--tagListWidth);
@lh: var(--tagListLineHeight);

.tag-list-wrapper {
  width: @w;

  li {
    float: left;
    margin-right: calc(@w * 0.02);
    margin-bottom: calc(@w * 0.01);

    display: flex;
    justify-content: space-around;
    align-items: center;

    padding: 0 calc(@w * 0.005) 0 calc(@w * 0.01);
    height: @lh;

    line-height: @lh;
    font-size: calc(@lh * 0.3);
    color: var(--darkBlue);
    border-radius: calc(@lh * 0.1);
    text-align: center;
    background-color: var(--slightBlue);

    &:last-child {
      box-sizing: border-box;

      width: calc(@w * 0.2);

      background-color: white;
      border: 1px solid var(--gray);

      input {
        width: 80%;
      }

      &:focus-within {
        border-color: var(--lightBlue);

        .submit-button {
          color: var(--blue);
        }
      }

      .submit-button {
        width: 20%;
        height: 80%;

        border-radius: 3px;

        font-size: calc(@lh * 0.5);

        transition: .2s;

        &:hover {
          transform: scale(1.4);
        }
      }
    }

    .icon-cancel {
      display: inline-block;
      font-size: calc(@lh * 0.2);
      margin-left: calc(@lh * 0.2);
      padding: 0 calc(@lh * 0.1);
      border-radius: 50%;
      transition: .3s;

      &:hover {
        transform: rotate(180deg);
        cursor: pointer;
      }
    }
  }
}

</style>